<template>
  <div>
    <el-select class="if-select-tree" :disabled="disabled" clearable @clear="clear" v-model="provinceCodePri" multiple @remove-tag="removeTag" placeholder="请选择">
      <el-option :value="selectTreeText" class="setstyle">
        <el-tree
          :data="areaBaseData"
          :props="defaultProps"
          ref="tree"
          node-key="code"
          :check-strictly="false"
          :default-checked-keys="selectTree"
          show-checkbox
          :expand-on-click-node="true"
          @check-change="handleNodeClick">
        </el-tree>
      </el-option>
    </el-select>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watch } from 'vue'

export default defineComponent({
  name: 'ifSelectTree',
  props: {
    provinceCode: {
    },
    initData: {
      type: Array,
      default: () => []
    },
    areaBaseData: {
      type: Array
    },
    updateKeys: {
      type: Function,
      default: () => () => {}
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defaultProps: {
        value: 'code',
        label: 'name',
        children: 'children',
      },
    }
  },
  setup(props) {
    const tree = ref()
    const selectTree = ref<Record<string, any>>([])
    const selectTreeText = ref<Record<string, any>>([])
    const provinceCodePri = ref<Record<string, any>>([])
    const clear = () => {
      tree.value!.setCheckedKeys([], false)
      props.updateKeys([]) // 同步
    }
    const removeTag = (label: string) => {
      const index = selectTreeText.value.findIndex((item: any) => item.label === label)
      const removeItem = selectTreeText.value.splice(index, 1)
      let datalist = tree.value.getCheckedNodes(true)
      datalist = datalist.filter((item: Record<string, any>) => {
        for (let i = 0; i < removeItem.length; i += 1) {
          const sItem = removeItem[i]
          if (item.code !== sItem.id) {
            return true
          }
        }
        return false
      })
      const codes = datalist.map((item: any) => item.code)
      tree.value!.setCheckedKeys(codes, false)
      props.updateKeys(codes) // 同步
    }
    const handleNodeClick = () => {
      const datalist = tree.value.getCheckedNodes(true)
      selectTreeText.value = []
      provinceCodePri.value = []
      const codes:Array<string> = []
      datalist.forEach((item: any) => {
        selectTreeText.value.push({ id: item.code, label: item.name })
        provinceCodePri.value.push(item?.name)
        codes.push(item.code)
      })
      props.updateKeys(codes)
    }
    const clearALltree = () => {
      tree.value!.setCheckedKeys(Object.values([]), false)
    }
    onMounted(() => {
      selectTree.value = props.initData
    })
    watch(() => props.initData, (newVal) => {
      tree.value!.setCheckedKeys(Object.values(newVal), false)
    })
    return {
      tree,
      selectTree,
      selectTreeText,
      provinceCodePri,
      // methods
      removeTag,
      handleNodeClick,
      clearALltree,
      clear
    }
  },
})

</script>
<style lang="less">
.setstyle {
  height: auto;
}
</style>
